<script>
export default {
  name: "my-cart",
  data() {
    return {
      price: this.price,
      num: 0,
      totalAmount:0,
    };
  },

  methods: {
    plus() {
      this.num++
    },
    minus() {
      if (this.num > 1) this.num--
    },

    changTotalAmount(val, oldval) {
      // console.log('val:', val)
      // console.log('oldval:', oldval)
      this.totalAmount = val * this.price
    }
  },
  watch:{
    num:'changTotalAmount'
  }
}
</script>

<template>
<!--  <span>总价格：<span id="span">{{totalAmount.toFixed(1)}}</span></span>-->
  <div class="number-box">
    <button @click.stop="minus">-</button>
    <p>{{ num }}</p>
    <button @click.stop="plus">+</button>
  </div>
</template>

<style scoped>
.number-box {
  display: flex;
  float: right;


  button { /* 添加或去掉购物车 */
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: none;
    margin: 0;
    padding: 0;
    border: 2px solid #ff9900;
  }
  p {
    padding: 0 10px;
    margin: 0;
  }
}
#span{
  color: #2c9d00;
}
</style>